<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //声明一个全局组件
    Vue.component("contents",{
        data:function () {
            return {
                info:"我是一个全局组件"
            };
        },
        template:"<div>{{info}}</div>"
    });


    //声明一个子组件
    var child = {
        data:function () {
            return {
                msg:"我是一个子组件"
            };
        },
        template:"<div>{{msg}}</div>"
    };

    var app = new Vue({
        el:"#app",
        data:function () {
            return {};
        },
        methods:{

        },
        //把子组件挂到父组件中
        components:{
            child:child
        },
        template:"<div><child></child><contents></contents></div>"
    });

</script>
</html>